<template>
  <div class="youke">
    <van-nav-bar
      :title="$route.meta.name"
      left-arrow
      fixed
      @click-left="onBack('/game/index')"
    ></van-nav-bar>
    <Main pb>
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoads"
          v-if="nolist"
           class="van-clearfix"
        >
          <van-cell
            v-for="item in list"
            :key="item.key"
            :to="`/game/point?id=${item.id}&status=${item.top}`"
          >
            <van-row>
              <van-col span="12">
                <span class="point-box">{{item.id}}</span>
                <span>号矿点</span>
              </van-col>
              <van-col
                span="12"
                class="reward-box"
              >
                <span class="status">{{item.top==0?'矿点匹配中':item.top==1?"已完成":"已出局"}}</span>
              </van-col>
            </van-row>
            <van-row>
              <van-col
                span="12"
                class="time"
              >布点时间:{{item.time}}</van-col>
            </van-row>
          </van-cell>
        </van-list>
          <nolist
          v-else
          imgshow="local"
        ></nolist>
      </van-pull-refresh>
    </Main>
  </div>
</template>

<script>
import { games } from "@/api";
import nolist from "@/components/common/nolist";
export default {
  data() {
    return {
      active: [{ type: 1, title: "可用点位" }, { type: 2, title: "排单点位" }],
      activeInx: 0,
      list: [],
      loading: true,
      finished: false,
      isLoading: false,
      total: 0,
      page: 1,
      nolist:true,
    };
  },
  components: {
    nolist
  },
  methods: {
    getlist() {
      games.wddw({ page: this.page }).then(res => {
        if (res.code == 1000) {
          if (Number(res.count) != 0) {
            this.list = [...this.list,...res.result];
            this.loading = false;
            this.nolist=true
            if (this.list.length == Number(res.count)) {
              this.finished = true;
            }
          } else {
            this.list = [];
            this.loading = false;
            this.finished = true;
            this.nolist=false
          }
        }
      });
    },
    choose_type() {
      let that = this;
      // wddw
      // console.log(that.active[that.activeInx].type);
    },
    onLoads() {
      this.page += 1;
      this.getlist();
      
      
      // 异步更新数据
      // setTimeout(() => {
      //     for (let i = 0; i < 10; i++) {
      //         this.list.push(this.list.length + 1);
      //     }
      //     // 加载状态结束
      //     this.loading = false;
      //
      //     // 数据全部加载完成
      //     if (this.list.length >= 40) {
      //         this.finished = true;
      //     }
      // }, 500);
    },
    onRefresh() {
      this.list = [];
      this.page = 1;
      this.nolist=true
      this.loading=true
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.getlist();
      }, 500);
    }
  },
  mounted() {
    this.getlist();
  }
};
</script>

<style scoped lang="less">
.van-cell {
  padding: 0px 10px 0px 10px;
  margin: 0 auto;
}

.van-col {
  font-size: 14px;
  height: 2rem;
  line-height: 2rem;

  .point-box {
    /*border: 1px solid #E4E4E4;*/
    background-color: red;
    color: #ffffff;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 12px;
    text-align: center;
    border-radius: 0.5rem;
  }
}

.reward-box {
  text-align: right;

  .status {
    color: #545454;
  }
}

.time {
  font-size: 12px;
}

.van-cell:not(:last-child)::after {
  left: 0px;
}
</style>
